<template>
    <div class="container">
      <!-- 顶部 -->
      <div class="container-nav">
        <div class="createtime">{{ myList.createTime }}</div>
        <!-- 下拉菜单 -->
        <el-dropdown>
          <span class="el-dropdown-link">
            <i class="el-icon-more"></i>
          </span>
          <el-dropdown-menu slot="dropdown" class="menu">
            <el-dropdown-item command="a" @click.native="deleteDoc">删除</el-dropdown-item>
            <!-- <el-dropdown-item command="b"  @click.native="$router.push('/inside/creation/publish?id=' + articles.articleId)">编辑</el-dropdown-item> -->
            <el-dropdown-item command="b"  @click.native="getList">编辑</el-dropdown-item>
            <!-- <div>{{articles}}</div> -->
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <!-- 内容 -->
      <div class="container-article">
        <div class="article-title">{{this.myList.title}}</div>
        <div class="article-content">{{this.myList.summary}}</div>
        <div class="article-tag">
          <el-tag>生活</el-tag>
          <el-tag type="warning">心情</el-tag>
        </div>
        <img class="article-cover" :src="this.myList.articlePic">
      </div>
      <!-- 底部 -->
      <div class="container-bottom">
        <div class="user">{{ myList.authorName }}
          <!-- <el-avatar class="head-portrait" icon="el-icon-user-solid"></el-avatar> -->
          <img :src="this.userList.userPic" class="head-portrait" alt="">
          <span class="name"></span>
        </div>
        <el-button type="primary" round>查看详情</el-button>
      </div>
    </div>
  </template>
  
  <script>
  
  import { getUserProfile } from '../../../../../api/user.js'
  export default {
    name: 'item',
    components: {},
    props: ['myList'],
    data () {
      return {
        userList: ''
      }
    },
    created() {
      // this.getCreateTime()
      // console.log(this.mylist)
      this.loadUser()
    },
    mounted() {
  
    },
    methods: {
      // 编辑文章
      // editDoc () {
      //   const user = JSON.parse(window.sessionStorage.getItem('user'))
      //   if (user.username === this.itemlist.creator) {
      //     this.$router.push('/inside/creation/publish' + this.listId + '/' + this.groId)
      //   } else {
      //     this.$message('你不能编辑别人的文章')
      //   }
      // }
      //获取当前用户信息
      loadUser() {
        getUserProfile().then(res => {
            this.userList = res.data.data
            console.log(this.userList)
        });
      }
    }
  }
  </script>
  
  
  <style lang="less" scoped>
    .container {
      width: 36.5vw;
      height: 28.4vh;
      border-radius: 4px;
      background: rgba(244, 250, 232, 1);
      box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.25);
      margin-bottom: 1vh;
    }
    .container .container-nav {
      height: 5.2vh;
      width: 36.5vw;
      color: rgba(119, 140, 162, 1);
      line-height: 5.2vh;
      box-sizing: border-box;
      position: relative;
      .createtime {
        font-size: 14px;
        position: absolute;
        left: 2vw;
      }
      ::v-deep .el-dropdown {
        color: rgba(183, 183, 183, 1);;
        float: right;
        margin-right: 0.8vw;
        transform: rotate(90deg);
      }
    }
    .container .container-article {
        height: 15.7vh;
        position: relative;
        .article-title {
          width: 20vw;
          height: 2.6vh;
          margin: 0 0 0 2vw;
          line-height: 2.6vh;
          color: rgba(13, 128, 120, 1);
          background-color: transparent;
        }
        .article-content {
          width: 20vw;
          height: 4.5vh;
          margin: 1vh 0 3vh 2vw;
          color: rgba(152, 169, 188, 1);
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2; /*这里设置几行*/
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .article-tag {
          height: 5.2vh;
          margin: 0 2vw;
          background-color: transparent;
          width: 15vw;
          height: 5.2vh;
          margin: -2vh 0vw 0vh 2vw;
          .el-tag {
            height: 3.1vh;
            width: 4.2vw;
            text-align: center;
            font-size: 14px;
            display: inline-block;
            margin: 1vh 0.6vw 1vh 0;
          }
        }
        .article-cover {
          width: 12vw;
          height: 13.2vh;
          background-color: #fff;
          position: absolute;
          right: 1.2vw;
          top: 0.8vh;
        }
      }
    .container .container-bottom {
      height: 7.3vh;
      position: relative;
      border-top: 2px solid rgba(213, 237, 161, 1);
      .user {
        height: 3.3vh;
        width: 9.2vh;
        margin: 2vh 2vw;
        .head-portrait {
          display: inline-block;
          width: 2.1vw;
          height: 3.3vh;
          border-radius: 50%;
        }
        .name {
          font-size: 12px;
        }
      }
      .el-button {
        display: inline-block;
        position: absolute;
        right: 1.1vw;
        top: 1.5vh;
        background-color: rgba(13, 128, 120, 1);
      }
    }
  
  </style>
  